<template>
    <div class="evaluation-history-detail evaluation" :style="{backgroundImage:'url('+require('@images/evaluation-bg.png')+')'}">
        <section class="content">
            <div class="tr back"><Button class="back ml20" type="primary" ghost @click="close">返回</Button></div>
            <h2 class="title">{{evaluationName}}</h2>
            <h3 class="sub-title mb10 pt30">患者信息</h3>
            <Row class="customer-info">
                <Col :span="8"><label for="">姓名：</label><span>{{customer.customerName}}</span></Col>
                <Col :span="8"><label for="">性别：</label>
                    <span v-if="Number(customer.sex)===1">男</span>
                    <span v-else-if="Number(customer.sex)===2">女</span>
                    <span v-else>-</span>
                </Col>
                <Col :span="8"><label for="">出生日期：</label><span>{{customer.birthday}}</span></Col>
                <Col :span="8"><label for="">手机号码：</label><span>{{customer.mobile}}</span></Col>
                <Col :span="8"><label for="">患者类型：</label><span>{{customer.customerType}}</span></Col>
                <Col :span="8"><label for="">确诊年份：</label><span>{{customer.careTime}}</span></Col>
                <Col :span="8"><label for="">身高(cm)：</label><span>{{customer.height}}</span></Col>
                <Col :span="8"><label for="">体重(kg)：</label><span>{{customer.weight}}</span></Col>
                <Col :span="8"><label for="">BMI：</label><span>-</span></Col>
            </Row>
        </section>
        <section class="content report">
            <h3 class="sub-title">{{section1.title}}</h3>
            <div class="">
                <Row class="line">
                    <Col :span="6"><strong>类别</strong></Col>
                    <Col :span="6"><strong>参考范围</strong></Col>
                    <Col :span="6"><strong>危险等级</strong></Col>
                    <Col :span="6"><strong>本次结果</strong></Col>
                </Row>
                <Row class="line"  v-for="(item,i) in section1.dataList" :key="i">
                    <Col :span="6"><span>{{item.factorName}}</span></Col>
                    <Col :span="6"><span>{{item.referScope}}</span></Col>
                    <Col :span="6">
                        <div class="img">
                            <img v-for="(item,i) in (5-item.riskLevel)"  :key="i" :width="12" :src="require('@images/flash2.png')" alt="">
                            <img v-for="(item,i) in item.riskLevel"  :key="i" :width="12" :src="require('@images/flash1.png')" alt="">
                        </div>
                    </Col>
                    <Col :span="6"><span>{{item.result}}</span></Col>
                </Row>
            </div>
        </section>

        <section class="content report">
            <!-- section2 -->
            <h3 class="sub-title">{{section2.title}}</h3>
            <div>
                <div class="graphic-title">{{section2.dataList1.indexName}}</div>
                <div class="graphic mt10">
                    <div :class="['cube',i===3?'flex2':'']" v-for="(item,i) in section2.dataList1.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </div>
            </div>

            <div>
                <div class="graphic-title">{{section2.dataList2.indexName}}</div>
                <div class="graphic mt10">
                    <div :class="['cube',i===3?'flex2':'']" v-for="(item,i) in section2.dataList2.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="content report">
            <!-- section3 -->
            <h3 class="sub-title">{{section3.title}}</h3>
            <Alert class="mt10">{{section3.remark}}</Alert>
            <div>
                <div class="graphic-title">{{section3.dataList1.indexName}}</div>
                <Row class="graphic mt10">
                    <div :class="['cube',i===1?'flex2':'']" v-for="(item,i) in section3.dataList1.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </Row>
            </div>

            <div>
                <div class="graphic-title">{{section3.dataList2.indexName}}</div>
                <div class="graphic mt10">
                    <div :class="['cube',i===1?'flex2':'']" v-for="(item,i) in section3.dataList2.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="content report">
            <!-- section4 -->
            <h3 class="sub-title">{{section4.title}}</h3>
            <Alert class="mt10">{{section4.remark}}</Alert>
            <div>
                <div class="graphic-title">{{section4.dataList1.indexName}}</div>
                <Row class="graphic mt10">
                    <div :class="['cube']" v-for="(item,i) in section4.dataList1.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </Row>
            </div>

            <div>
                <div class="graphic-title">{{section4.dataList2.indexName}}</div>
                <div class="graphic mt10">
                    <div :class="['cube']" v-for="(item,i) in section4.dataList2.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </div>
            </div>

            <div>
                <div class="graphic-title">{{section4.dataList3.indexName}}</div>
                <div class="graphic mt10">
                    <div :class="['cube']" v-for="(item,i) in section4.dataList3.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </div>
            </div>

            <div>
                <div class="graphic-title">{{section4.dataList4.indexName}}</div>
                <div class="graphic mt10">
                    <div :class="['cube']" v-for="(item,i) in section4.dataList4.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </div>
            </div>

            <div>
                <div class="graphic-title">{{section4.dataList5.indexName}}</div>
                <div class="graphic mt10">
                    <div :class="['cube']" v-for="(item,i) in section4.dataList5.scopeList" :key="i">
                        <div>{{item.scopeName}}</div>
                        <div :style="{backgroundColor:item.scopeColor}"/>
                        <div>{{item.index}}</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="content report section5">
            <!-- section5 -->
            <div>{{section5.explain}}</div>
            <div class="des">
                <div>{{section5.dataList1.subTitle}}</div>
                <div v-for="(item,i) in section5.dataList1.subContent" :key="i">{{item}}</div>
            </div>
            <div class="des">
                <div>{{section5.dataList2.subTitle}}</div>
                <div v-for="(item,i) in section5.dataList2.subContent" :key="i">{{item}}</div>
            </div>
            <div class="des">
                <div>{{section5.dataList3.subTitle}}</div>
                <div v-for="(item,i) in section5.dataList3.subContent" :key="i">{{item}}</div>
            </div>
        </section>
    </div>
</template>
<script>
import { evaluationGetResult } from '@api/evaluation.js'
import { customerPageQueryList ,customerGet} from '@api/customer.js'
export default {
    props: {
        cur: {
            type:Object,
            required: true,
            default: {},
        },
        close: {
            type: Function,
            required: true,
            default: () => {}
        }
    },
    data() {
        return {
            customer: {},
            data: {},
            evaluationName: "",
            riskGrade: '',
            section1: {
                dataList: [],
                title: ' ',
            },
            section2: {
                dataList1: {indexName:'',scopeList:[]},
                dataList2: {indexName:'',scopeList:[]},
                title: ' ',
            },
            section3: {
                dataList1: {indexName:'',scopeList:[]},
                dataList2: {indexName:'',scopeList:[]},
                title: ' ',
                remark: '',
            },
            section4: {
                dataList1: {indexName:'',scopeList:[]},
                dataList2: {indexName:'',scopeList:[]},
                dataList3: {indexName:'',scopeList:[]},
                dataList4: {indexName:'',scopeList:[]},
                dataList5: {indexName:'',scopeList:[]},
                remark: '',
                title: ' ',
            },
            section5: {
                dataList1: {subTitle:'',subContent:[]},
                dataList2: {subTitle:'',subContent:[]},
                dataList3: {subTitle:'',subContent:[]},
                explain: '',
                title: ' ',
            },
        }
    },
    mounted () {
        const { customerId } = this.cur;
        if (customerId) {
            this.evaluationGetResult();
            this.customerGet()
        }
    },
    methods: {
        async customerGet(){
            const { customerId } = this.cur;
            this.getCustomerLoading = true;
            const res = await customerGet({id: customerId})
            if (res.code === '0') {
                const { data } = res;
                const { customerName,birthday ,sex, mobile, customerType , customerInfo, customerHealth} = data;
                const { height, weight, careTime } = customerInfo
                const customer = {customerName, customerId, careTime, birthday, sex, mobile, height, weight, customerType, };
                this.customer = customer;
            }
            this.getCustomerLoading = false;
        },
        evaluationGetResult(){
            const { type,customerId,evaluationId } = this.cur;
            evaluationGetResult({ code:type,customerId,evaluationId }).then(res => {
                if (res.code === "0") {
                    this.data = res.data;
                    const { evaluationName,evaluationReport, riskGrade } = res.data;
                    const { content } = evaluationReport;
                    const [section1,section2,section3,section4,section5] = content;
                    this.section1 = section1.template;
                    console.log("section2.template.dataList[0]-->" , section2.template.dataList[0])
                    this.section2 = {
                        title: section2.template.title,
                        dataList1: section2.template.dataList[0],
                        dataList2: section2.template.dataList[1],
                    }

                    this.section3 = {
                        title: section3.template.title,
                        dataList1: section3.template.dataList[0],
                        dataList2: section3.template.dataList[1],
                        remark: section3.template.remark[0],
                    }

                    this.section4 = {
                        title: section4.template.title,
                        dataList1: section4.template.dataList[0],
                        dataList2: section4.template.dataList[1],
                        dataList3: section4.template.dataList[2],
                        dataList4: section4.template.dataList[3],
                        dataList5: section4.template.dataList[4],
                        remark: section3.template.remark[0],
                    }

                    this.section5 = {
                        title: section5.template.title,
                        dataList1: section5.template.dataList[0],
                        dataList2: section5.template.dataList[1],
                        dataList3: section5.template.dataList[2],
                        explain: section5.template.explain[0],
                    }
                    console.log("section111>", this.section1)
                    console.log("section2>", section2)
                    console.log("section3>", section3)
                    console.log("section4>", section4)
                    console.log("section5>", section5)
                    this.evaluationName = evaluationName;
                }
            })
        }
    },
    watch: {
        cur(after){
            this.evaluationGetResult()
            this.customerGet()
        }
    }
}
</script>
<style lang="scss" scoped>
    .evaluation-history-detail{
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 99;
        min-height: 1000px;
        .back{
            position: relative;
            top: 15px;
        }
        .line{
            line-height: 48px;
            border-bottom: 1px solid #DCDEE2;
        }
        .title{
            color: #11A876;
            font-size: 20px;
            text-align: center;
        }
        .sub-title{
            font-size: 16px;
            line-height: 50px;
            border-bottom: 1px solid #DCDEE2;
        }
        .content{
            width: 940px;
            padding-left: 30px;
            padding-right: 30px;
            margin-left: auto;
            margin-right: auto;
            max-width: 1000px;
            background-color: #fff;
            padding-bottom: 20px;
        }
        .report{
            margin-top: 20px;
        }
        .customer-info{
            line-height: 200%;
            span{
                color: #666;
            }
        }
        .img{
            position: relative;
            top: 8px;
            img{
                margin-right: 2px;
            }
        }
        .graphic-title{
            font-size: 14px;
            font-weight: bold;
            margin-top: 20px;
        }
        .graphic{
            display: flex;
            justify-content: space-between;
            padding-left: 30px;
            padding-right: 30px;
            >div{
                flex: 1;
            }
            .flex2{
                flex: 2;
            }
            .cube{
                div{
                    line-height: 200%;
                }
                div:nth-child(1){
                    text-align: center;
                }
                div:nth-child(2){
                    height: 10px;
                    border-right: 5px solid #DDE8F2;
                }
                div:nth-child(3){
                    text-align: right;
                }
            }
            .cube:first-child{
                div:nth-child(2){
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }
            }
            .cube:last-child{
                div:nth-child(2){
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    border-right: 0 none;
                }
            }
        }
        .des{
            margin-top: 20px;
            line-height: 200%;
            div:first-child{
                color: #808695;
            }
        }
        .section5{
            padding-top: 30px;
        }
    }
</style>